<div th:remove="tag">
    
    
    <!-- facets -->
    <div th:each="facetDto : ${facets}" class="section">
        <h3 th:text="${facetDto.facet.label}"></h3>
        <span th:if="${facetDto.facet.canMultiselect}" >
	      
	       <span th:if="${not #lists.isEmpty(facetDto.facet.searchFacetRanges)}">
                 <input type="hidden" 
                      th:name="${facetDto.facet.field.abbreviation} + '-range'" 
                      th:id="${facetDto.facet.field.abbreviation} + '-range'"
                      th:value="'range['+ ${facetDto.facet.searchFacetRanges[0].minValue} +':' + ${facetDto.facet.searchFacetRanges[0].maxValue} +']'" 
                 />
                <div style="text-align: center;"><span th:id="${facetDto.facet.field.abbreviation} + '-min'">[[${#numbers.formatInteger(facetDto.facet.searchFacetRanges[0].minValue, 1)}]]</span> - <span th:id="${facetDto.facet.field.abbreviation} + '-max'">[[${#numbers.formatInteger(facetDto.facet.searchFacetRanges[0].maxValue, 1)}]]</span></div>
                <div 
                	th:name="'range-' + ${facetDto.facet.field.abbreviation}" 
                	th:id="'range-' + ${facetDto.facet.field.abbreviation}"></div>
	                <script type="text/javascript">
	                $(function() {
	                 	$("#range-[[${facetDto.facet.field.abbreviation}]]").slider({
	                 		min: [[${facetDto.facet.searchFacetRanges[0].minValue}]],
	                 		max: [[${facetDto.facet.searchFacetRanges[0].maxValue}]],
	                 		values: [ [[${facetDto.facet.searchFacetRanges[0].minValue}]], [[${facetDto.facet.searchFacetRanges[0].maxValue}]] ],
	                 		range: true,
	                 		change: function( event, ui ) {
	                 			var minValue = $( "#range-[[${facetDto.facet.field.abbreviation}]]" ).slider( "values", 0 );
	                 			var maxValue = $( "#range-[[${facetDto.facet.field.abbreviation}]]" ).slider( "values", 1 );
	                 			$("#[[${facetDto.facet.field.abbreviation}]]-range").val("range["+minValue+":"+maxValue+"]");
	                 			$("#[[${facetDto.facet.field.abbreviation}]]-min").html(minValue);
	                 			$("#[[${facetDto.facet.field.abbreviation}]]-max").html(maxValue);
	                 			minValue = null;
	                 			maxValue = null;
	                 			updateProducts();
	                 		}
	                 	}); 
	               	});
	                </script>
	       </span>
	       
              <!-- <li th:each="facetValue : ${facetDto.facetValues}" th:if="${facetDto.active or (!facetDto.showQuantity or facetValue.quantity > 0)}"> -->
              <li th:if="${#lists.isEmpty(facetDto.facet.searchFacetRanges)}" th:each="facetValue : ${facetDto.facetValues}">
                  <input type="checkbox" 
                      th:name="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}" 
                      th:id="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}" 
                      th:checked="${facetValue.active}"
                      onchange="updateProducts();"/>
                      
                  <label th:for="${facetDto.facet.field.abbreviation + '-' + facetValue.valueKey}">
<!-- 	                       <span th:substituteby="catalog/partials/facetFilter :: facet-value-display" /> -->
                       <span th:text="${facetValue.valueKey}" />                
                   	   <span class="facetCount" th:if="${facetDto.showQuantity and !facetDto.active}" th:text="${facetValue.quantity}"></span>
                   	   <i th:if="${facetValue.active}" class="icon-remove"></i>
                  </label>
              </li>
	        
          </span> 
    </div> 
    
</div>